<script setup lang="ts">
	import { ref, onBeforeMount } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
	import {
		getMaterialUnitListApi,
		
	} from "@/api/materialApi";
	import {
	  getWarehouseListApi,
	  getWarehouseAreaListApi,
	  getWarehouseLocationListApi
	} from "@/api/warehouseApi";
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "新增",
			status: 1,
			code: "",
			name: "",
			materialId: 0,
			materialUnitId: null,
			materialCategoryId: null,
			stockInTactic: null,
			stockOutTactic: null,
			warehouseId: null,
			warehouseAreaId: null,
			warehouseLocationId: null,
			expireType: null,
			expireDate: null,
			produceDate: null,
			expireDateNum: null,
			stockWarn: null,
			stockWarnMin: null,
			stockWarnMax: null,
			spec: null,
			remarks: null,
			length: null,
			width: null,
			height: null,
			volume: null,
			weight: null,
			warehouseArr: null,
			materialCategorySelect: null
		})
	});
	const statusOptions = [
		{
			value: 1,
			label: "启用"
		},
		{
			value: 2,
			label: "禁用"
		}
	];
	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);

	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });
	const activeNames = ref(['1'])
	const unitOption = ref([])
	const getUnitList = () => {
		getMaterialUnitListApi({ page: 1, perPage: 999 }).then((res) => {
			if (res?.code === 200) {
				unitOption.value = res.result.list
			}
		})
	}
	const defaultProps = {
		children: 'children',
		label: 'name',
		value: 'materialCategoryId'
	}
	const stockInTacticOptions = [
		{
			value: 1,
			label: '线路最近'
		},
		{
			value: 2,
			label: '线路最远'
		}
	]
	const stockOutTacticOptions = [
		{
			value: 1,
			label: '先进先出'
		},
		{
			value: 2,
			label: '临期先出'
		}
	]
	const addressChange = (e) => {
		if(e) {
			newFormInline.value.warehouseId = e[0]
			if(e.length === 2) {
				newFormInline.value.warehouseAreaId = e[1]
			}
			if(e.length === 3) {
				newFormInline.value.warehouseAreaId = e[1]
				newFormInline.value.warehouseLocationId = e[2]
			}
		}
		
	}
	const warehouseOptions = ref()
	const getWarehouseData = () => {
		getWarehouseListApi({ page: 1, perPage: 999 }).then((res) => {
			if (res?.code === 200) {
				warehouseOptions.value = res.result.list
				getWarehouseAreaData()
				
			}
		})
	}
	const getWarehouseAreaData = () => {
		getWarehouseAreaListApi({ page: 1, perPage: 999 }).then((res) => {
			if (res?.code === 200) {
				if(res.result.list.length > 0) {
					for (let item of warehouseOptions.value) {
						item.children = []
						for (let row of res.result.list) {
							if(item.warehouseId === row.warehouseId) {
								item.children.push(row)
							}
						}
					}
					getWarehouseLocationData()
				}
			}
		})
	}
	const getWarehouseLocationData = () => {
		getWarehouseLocationListApi({ page: 1, perPage: 999 }).then((res) => {
			if (res?.code === 200) {
				if(res.result.list.length > 0) {
					for (let item of warehouseOptions.value) {
						item.id = item.warehouseId
						for (let child of item.children) {
							child.children = []
							child.id = child.warehouseAreaId
							for (let row of res.result.list) {
								row.id = row.warehouseLocationId
								if(child.warehouseAreaId === row.warehouseAreaId) {
									child.children.push(row)
								}
							}
						}
					}
				}
			}
		})
	}
	const expireTypeOptions = [
		{
			value: 1,
			label: '过期时间'
		},
		{
			value: 2,
			label: '生产日期+保质期'
		},
		{
			value: 3,
			label: '入库时间+保质期'
		},
		{
			value: 4,
			label: '不过期'
		}
	]
	const stockWarnOptions = [
		{
			value: 1,
			label: '开启'
		},
		{
			value: 2,
			label: '关闭'
		}
	]
	const switchVal = ref()
	const switchChange = (val: boolean | string | number) => {
		if(val) {
			newFormInline.value.code = 'ITEM'+(new Date()).toLocaleString().replace(/[:/ ]/g, '')
		} else {
			newFormInline.value.code = ''
		}
	}
	onBeforeMount(() => {
		getUnitList()
		getWarehouseData()
		
	})
</script>

<template>
	<div style="margin-bottom: 20px;">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="物料信息" name="1">
				<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto">
					<el-row :gutter="30">
						<re-col :value="12" :xs="24" :sm="24">
							<el-form-item label="物料名称" prop="name">
								<el-input v-model="newFormInline.name" clearable placeholder="请输入物料名称" :maxlength="30"/>
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24">
							<el-form-item label="物料编码" prop="code">
								<div style="display: flex;">
									<el-input v-model="newFormInline.code" clearable placeholder="请输入物料编码" :maxlength="30" style="width: 160px;"
									:disabled="newFormInline.title==='新增'?false:true"/>
									<div style="display: flex;align-items: center;margin-left: 10px;" v-if="newFormInline.title==='新增'">
										<el-switch v-model="switchVal" @change="switchChange" active-text="自动生成"/>
									</div>
								</div>
								
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24">
							<el-form-item label="单位" prop="materialUnitId">
								<el-select v-model="newFormInline.materialUnitId" placeholder="请选择单位" class="w-full"
									clearable>
									<el-option v-for="(item, index) in unitOption" :key="index" :label="item.name"
										:value="item.materialUnitId" />
								</el-select>
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24">
							<el-form-item label="物料类型" prop="materialCategoryId">
								<el-tree-select v-model="newFormInline.materialCategoryId"
									:data="newFormInline.materialCategorySelect" check-strictly :render-after-expand="false"
									class="w-full" :props="defaultProps" />
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24">
							<el-form-item label="入库策略" prop="stockInTactic">
								<el-select v-model="newFormInline.stockInTactic" placeholder="请选择入库策略" class="w-full"
									clearable>
									<el-option v-for="(item, index) in stockInTacticOptions" :key="index"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24">
							<el-form-item label="出库策略" prop="stockOutTactic">
								<el-select v-model="newFormInline.stockOutTactic" placeholder="请选择出库策略" class="w-full"
									clearable>
									<el-option v-for="(item, index) in stockOutTacticOptions" :key="index"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24">
							<el-form-item label="存放地址" prop="warehouseArr">
								<el-cascader v-model="newFormInline.warehouseArr" class="w-full" v-if="warehouseOptions"
									:options="warehouseOptions"
									:props="{
									  value: 'id',
									  label: 'name',
									  emitPath: true,
									  checkStrictly: true,
									}" clearable filterable placeholder="请选择存放地址"
									@change="addressChange">
									<template #default="{ node, data }">
										<span>{{ data.name }}</span>
									</template>
								</el-cascader>
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24">
							<el-form-item label="过期时间计算" prop="expireType">
								<el-select v-model="newFormInline.expireType" placeholder="请选择过期时间计算" class="w-full"
									clearable>
									<el-option v-for="(item, index) in expireTypeOptions" :key="index" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.expireType === 1">
							<el-form-item label="过期时间" prop="expireDate">
								<el-date-picker
									v-model="newFormInline.expireDate"
									type="date"
									placeholder="请选择过期时间"
									format="YYYY-MM-DD"
									value-format="YYYY-MM-DD"
									style="width: 100%;"
								  />
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.expireType === 2">
							<el-form-item label="生产日期" prop="produceDate">
								<el-date-picker
									v-model="newFormInline.produceDate"
									type="date"
									placeholder="请选择生产日期"
									format="YYYY-MM-DD"
									value-format="YYYY-MM-DD"
									style="width: 100%;"
								  />
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.expireType === 2 || newFormInline.expireType === 3">
							<el-form-item label="保质期(天)" prop="expireDateNum">
								<el-input-number v-model="newFormInline.expireDateNum" :min="1" controls-position="right" :precision="0"
								style="width: 100%;"/>
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24">
							<el-form-item label="状态" prop="status">
								<el-select v-model="newFormInline.status" placeholder="请选择状态" class="w-full" clearable>
									<el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24">
							<el-form-item label="库存告警" prop="stockWarn">
								<el-select v-model="newFormInline.stockWarn" placeholder="请选择库存告警" class="w-full" clearable>
									<el-option v-for="(item, index) in stockWarnOptions" :key="index" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.stockWarn === 1">
							<el-form-item label="最小库存数" prop="stockWarnMin">
								<el-input-number v-model="newFormInline.stockWarnMin" :min="1" controls-position="right" :precision="0"
								style="width: 100%;"/>
							</el-form-item>
						</re-col>
						<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.stockWarn === 1">
							<el-form-item label="最大库存数" prop="stockWarnMax">
								<el-input-number v-model="newFormInline.stockWarnMax" :min="1" controls-position="right" :precision="0"
								style="width: 100%;"/>
							</el-form-item>
						</re-col>
						<re-col :value="24" :xs="24" :sm="24">
							<el-form-item label="规格" prop="spec">
								<el-input v-model="newFormInline.spec" clearable placeholder="请输入规格" :maxlength="30"/>
							</el-form-item>
						</re-col>
						<re-col :value="24" :xs="24" :sm="24">
							<el-form-item label="物料备注" prop="remarks">
								<el-input v-model="newFormInline.remarks" :autosize="{ minRows: 2, maxRows: 4 }"
									type="textarea" placeholder="请输入备注" :maxlength="100" show-word-limit/>
							</el-form-item>
						</re-col>
					</el-row>
				</el-form>
			</el-collapse-item>
			<el-collapse-item title="物料空间" name="2">
				<el-form :model="newFormInline" label-width="auto">
					<el-row :gutter="30">
						<re-col :value="8" :xs="8" :sm="8">
							<el-form-item label="长(cm)">
								<el-input-number v-model="newFormInline.length" :min="1" :max="999999999" :precision="2" controls-position="right" />
							</el-form-item>
						</re-col>
						<re-col :value="8" :xs="8" :sm="8">
							<el-form-item label="宽(cm)">
								<el-input-number v-model="newFormInline.width" :min="1" :max="999999999" :precision="2" controls-position="right" />
							</el-form-item>
						</re-col>
						<re-col :value="8" :xs="8" :sm="8">
							<el-form-item label="高(cm)">
								<el-input-number v-model="newFormInline.height" :min="1" :max="999999999" :precision="2" controls-position="right" />
							</el-form-item>
						</re-col>
						<re-col :value="8" :xs="8" :sm="8">
							<el-form-item label="体积(立方米)">
								<el-input-number v-model="newFormInline.volume" :min="1" :max="999999999" :precision="2" controls-position="right" />
							</el-form-item>
						</re-col>
						<re-col :value="8" :xs="8" :sm="8">
							<el-form-item label="载重量(千克)">
								<el-input-number v-model="newFormInline.weight" :min="1" :precision="2" controls-position="right" />
							</el-form-item>
						</re-col>
					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>

</template>
<style scoped></style>